import React, { useEffect, useState } from 'react'
import style from './index.less'
import { useTitle } from 'ahooks'
import Write from '@/images/order/write.png'
import { List } from 'antd-mobile'
import { getQueryBillById } from '@/services/Publish'
import img from '@/images/supply/cai.png'
import Item from './.item'
interface detailDto {
    id: number;
    goodsName: string;
    imageUrl: string;
    unitPrice: number;
    amount: number;
    receiptAll?: number;
    specification: string;
}

interface receivableDto {
    useName: string;
    phone: string;
    ID: string;
}

interface paymentDto {
    accountBank: string;
    bankAddress: string;
    taxId: string;
    enterprise: string;
    account: string;
    status: string;
}

export default () => {
    useTitle('订单详情')
    const [detail, setDetail] = useState<detailDto[]>([])
    const [receivables, setReceivables] = useState<receivableDto>({} as receivableDto)
    const [payment, setPayment] = useState<paymentDto>({} as paymentDto)
    const getData = async () => {
        const res = await getQueryBillById('1')
    }

    const aa = [
        {
            id: 1,
            imageUrl: img,
            goodsName: '大蒜',
            unitPrice: 2,
            amount: 2500,
            specification: '250'
        },
        {
            id: 2,
            imageUrl: img,
            goodsName: '花生',
            unitPrice: 5,
            amount: 2800,
            specification: '250'
        },
    ]
    const bb = {
        useName: "杨综艺",
        phone: "17712345678",
        ID: "5000000000445555555"
    }
    const cc = {
        accountBank: "中国商业银行",
        account: '61233646679969999',
        bankAddress: "预备",
        taxId: 'M382938278836423',
        enterprise: "重庆中链融科技有限公司",
        status: 'true',
    }

    useEffect(() => {
        setDetail(aa)
        setReceivables(bb)
        setPayment(cc)
    }, [])

    return (
        <div className={style.page}>
            <div className={style.title}>
                <img src={Write} alt="write" className={style.img} />
                <div className={style['title-left']}>
                    {payment.status === 'true' ? (
                        "待开票"
                    ) : (
                        "已开票"
                    )}
                </div>
                {payment.status === 'true' ? (
                    <div className={style['title-right']}>凭证审核中</div>
                ) : (
                    <>
                     <div className={style['title-right']}>凭证驳回</div>
                    <div className={style.score}>原因：收款人不能为企业</div>
                    </>
                   
                )}

            </div>

            <div className={style.details}>
                <List header='货劳明细' mode='card'>
                    {detail.map((item) => (
                        <div>
                            <List.Item key={item.id}>
                                <div className={style.con}>
                                    <div className={style['con-left']}>
                                        <img src={item?.imageUrl} alt="商品图片" />
                                    </div>
                                    <div className={style['con-right']}>
                                        <div className={style['con-title']}>
                                            <span className={style['con-title-a']}>{item?.goodsName}</span>
                                            <span className={style['con-title-b']}>{item?.unitPrice}元/斤 × {item?.specification}</span>
                                        </div>
                                        <div className={style['con-title']}>
                                            <span className={style['con-title-c']}>货品名称:{item.goodsName}</span>
                                            <span className={style['con-title-d']}>￥{item?.amount}</span>
                                        </div>
                                    </div>
                                </div>
                            </List.Item>

                        </div>
                    ))}
                    <List.Item>
                        <div className={style.total}>
                            货物总额:
                            <span>￥
                                {/* {item?.receiptAll} */}
                            </span>
                        </div>
                    </List.Item>
                </List>
            </div>

            <div className={style.receivables}>
                <List mode='card'>
                    <List.Item className={style['extra-item']}>
                        <span className={style['extra-label']}>收款方</span>
                        <span className={style.sell}>卖家</span>
                        <span className={style['extra-value']}>{receivables.useName}</span>
                    </List.Item>
                    <List.Item extra={receivables.phone}>手机号</List.Item>
                    <List.Item extra={receivables.ID}>身份证号</List.Item>
                </List>
            </div>

            <div className={style.payment}>
                <List mode='card'>
                    <List.Item className={style['extra-item']}>
                        <span className={style['extra-label']}>收款方</span>
                        <span className={style.buy}>卖家</span>
                        <span className={style['extra-value']}>{payment.enterprise}</span>
                    </List.Item>
                    <List.Item extra={payment.taxId}>纳税人识别号</List.Item>
                    <List.Item extra={"xxxxxx"}>地址电话</List.Item>
                    <List.Item>
                        <div className={style['list-item']}>
                            开户行及账号
                            <span>
                                <div>{payment.accountBank}</div>
                                {payment.account}
                            </span>
                        </div>
                    </List.Item>
                </List>
            </div>

            <div className={style.invoice}>
                <List mode='card'>
                    <List.Item extra={receivables.phone}>开票方式</List.Item>
                    <List.Item extra={receivables.ID}>凭证图片</List.Item>
                    <List.Item extra={receivables.phone}>订单创建时间</List.Item>
                    <List.Item extra={receivables.ID}>审核成功时间</List.Item>
                    <List.Item extra={receivables.phone}>开票成功时间</List.Item>
                    <List.Item extra={receivables.ID}>开票作废时间</List.Item>
                    <List.Item extra={receivables.phone}>订单编号</List.Item>
                    <List.Item extra={receivables.ID}>订单来源</List.Item>
                </List>
            </div>

            <div className={style.bottom}>
                <Item/>
            </div>
        </div>
    )
}
